import React, {Component} from 'react';
import { Table, Tag, Space ,Card,Button ,Modal} from 'antd';
import {PlusCircleOutlined} from "@ant-design/icons";
import {reqUseList} from '../../api/index.js'
/**
 * 首页路由组件
 */
const { Column } = Table;
export default class User extends Component {
	addFormRef = React.createRef();
	state = {
		userList:[],
		roleList:[],
		isShowAdd: false,
	}
	componentDidMount(){
		this.useList()
	}
	useList = async()=>{
		  const {status,data} =await reqUseList();
		  if(status == 0) {
			  this.setState({userList:data.users, roleList: data.roles})
		  }
	}
	addUse =()=>{
		console.log('我被点了')
	}
    render() {
		const {userList,roleList,isShowAdd} = this.state
        return (
		    <Card  title={ <Button type="primary" icon={<PlusCircleOutlined/>} onClick={()=>{
				this.setState({isShowAdd: true}, () => {
				    //重置表单
				    this.addFormRef.current.resetFields();
				})
			}}>添加</Button>} style={{ width: '100%' }}>
			 <Modal title="添加用户" visible={isShowAdd} okText="确认" cancelText="取消" onOk={this.handleAddOkModal}
                       onCancel={() => {
                           this.setState({isShowAdd: false}, () => {
                               //重置表单
                               this.addFormRef.current.resetFields();
                           })
                       }}>
			        <p>Some contents...</p>
			        <p>Some contents...</p>
			        <p>Some contents...</p>
			</Modal>
		      <Table dataSource={userList} bordered>
		           <Column title="用户名" dataIndex="username" key="username" />
		         <Column title="邮箱" dataIndex="email" key="email" />
		         <Column title="电话" dataIndex="phone" key="phone" />
		         <Column title="注册时间" dataIndex="create_time" key="create_time" />
		        <Column title="所属角色" dataIndex="role_id" key="role_id" 
		        render={item=>{
		      	 if(item){
		      		 if(roleList.length) {
		      			 let role = roleList.find(role=>{
		      				return  role._id == item 
		      			 })
		      			 if(role) {
		      				 return role.auth_name
		      			 }
		      		 }
		      	 }
		         return item;
		        }}/>
		         <Column
		           title="操作"
		           key="action"
		           render={(text, record) => (
		             <Space size="middle">
		               <Button  type="link" >修改</Button>
		               <Button  type="link">删除</Button>
		      	    
		             </Space>
		           )}
		         />
		       </Table>
		    </Card>
            
		
        );
    }
}